<script type="text/javascript">
    function mail_form() {
        var sender_mail = $("#mail_setting_body").find("#sender_mail");
        var mail_password = $("#mail_setting_body").find("#mail_password");
        var mail_server = $("#mail_setting_body").find("#mail_server");
        var mail_ports = $("#mail_setting_body").find("#mail_ports");
        var mail_tls = $("#mail_setting_body").find("#mail_tls");

        var objs = [
            {
                'el': sender_mail, 'regs': [{
                'regexp': /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,
                'text': '请输入正确发件人 例如：xx@qq.com'
            }], 'text': '请输入发件人。'
            },
            {
                'el': mail_password, 'text': '请输入邮箱密码。'
            },
            {'el': mail_server, 'text': '请输入邮箱服务器。'},
            {
                'el': mail_ports, 'regs': [
                {'regexp': /^[0-9]+$/i, 'text': '端口必须为数字。'}
            ], 'text': '请输入端口。'
            },
            {'el': mail_tls, 'text': '请选择TLS/SSL。'}
        ];
        var result = checkEnableSubmit(objs);
        var jqtip = $('.error-tip');
        jqtip.css({
            'top': '-9999px',
            'left': '-9999px'
        });
        $("#mail_setting_body").find('input').css({
            'border': '1px solid #d8dce5'
        });
        if (result.enableSubmit === false) {
            var $el = result.el;
            var $parent = $el.parent();
            var top = $parent[0].offsetTop;
            var left = $parent[0].offsetLeft;
            var jqtip = $('.error-tip');
            jqtip.find('p').text(result.text);
            jqtip.css({
                'top': (top - 35) + 'px',
                'left': left + 'px'
            });
            $el.css({
                'border': '1px solid #fa575f'
            });
            return {};
        }

        var post_data = {
            "mail": $.trim(sender_mail.val()),
            "password": $.trim(mail_password.val()),
            "server": $.trim(mail_server.val()),
            "port": $.trim(mail_ports.val()),
            "protocol": $.trim(mail_tls.attr("realvalue"))
        }
        return post_data

    }

    function isEmpty(value) {
        return (Array.isArray(value) && value.length === 0)
            || (Object.prototype.isPrototypeOf(value) && Object.keys(value).length === 0);
    }

    function submit_mail_create() {
        post_data = mail_form();
        $('.rtn-tip').slideUp('fast');
		console.log(!isEmpty(post_data))
		console.log((post_data))
        if (!isEmpty(post_data)) {
            $.post("/customer/mail/create", post_data,
                function (data) {
                    if (data.reply.is_success) {
                        $('.rtn-tip').text('保存配置完成').slideDown('fast');
                    } else {
                        var error = data.reply.error;
                        $('.rtn-tip').text(error).slideDown('fast');
                    }
                });
        }
    }

    function submit_mail_test() {
        post_data = mail_form();
        $('.rtn-tip').slideUp('fast');
        if (!isEmpty(post_data)) {
            $.post("/customer/mail/test", post_data,
                function (data) {
                    if (data.reply.is_success) {
                        $('.rtn-tip').text('测试完成').slideDown('fast');
                    } else {
                        var error = data.reply.error;
                        $('.rtn-tip').text(error).slideDown('fast');
                    }
                });
        }
    }

    function empty_mail_input() {
        $("#mail_setting_body input[type=password], input[type=text]").each(function () {
            $(this).val('');
        })
        $("#mail_tls").attr('realavalue', '');
        $("#mail_delete").attr('disabled', true);
    }
    function confirm_submit_mail_delete() {
        msg = '确认删除邮件配置？';
        SelfConfirm(msg, submit_mail_delete, "删除提示");
    }

    function submit_mail_delete() {
        var mail_id =  $("#mail_setting_body").find("#mail_id").val()
        var post_data = {'id': mail_id};
        $.post("/customer/mail/delete", post_data,
            function (data) {
                if (data.reply.is_success) {
                    $(".callback_error_tip").text('删除邮件配置完成').css({"display": "block", "color": '#000'});
                    empty_mail_input();
                } else {
                    error = data.reply.error;
                    $(".callback_error_tip").text(error).css({"display": "block", "color": '#000'});
                }
            });
    }


    var port_source = [['TLS', 'TLS'], ['SSL', 'SSL']];
    $('#mail_tls').rqDropDown({
        "datatype": "local",
        "source": port_source,
    });
</script>
<style>
    .title {
        padding: 20px 30px;
    }

    .title h3 {
        margin: 0;
    }

    .config-box {
        position: relative;
        margin: 0 30px;
        padding: 30px 40px;
        border-bottom: 1px solid #eee;
        background: #fff;
    }

    .config-box .config-item {
        margin-top: 15px;
    }

    .config-box .config-item input {
        width: 180px;
    }

    .config-box .config-item label {
        margin: 0;
    }

    .config-box span {
        color: #f00;
    }

    .footer {
        margin: 0 30px;
        padding: 20px 40px 30px 40px;
        background: #fff;
    }

    .rtn-tip {
        width:50%;
        background-color: #ED7441;
        font-size: 14px;
        color: #fff;
        border-radius: 3px !important;
        display: none;
        padding: 3px 10px;
    }
</style>
<div class="title">
    <h3>邮箱配置</h3>
</div>
<div class="config-box" id="mail_setting_body">
    <input style="display:none" type="text" id="mail_id" value="{{mail.id}}"/>
    <div class="rtn-tip"></div>
    <div class="config-item">
        <div class="item-key">
            <label>发件人</label><span>*</span>
        </div>
        <div class="item-input">
            <input id="sender_mail" size="25" max="10000" min="1" type="text" value="{{mail.mail}}"/>
        </div>
    </div>

    <div class="config-item">
        <div class="item-key">
            <label>邮箱密码</label><span>*</span>
        </div>
        <div class="item-input">
            <input type="password" id="mail_password" maxlength="16" value="{{mail.get_password}}"
                   autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
                   onpaste="return false" oncontextmenu="window.event.returnValue=false"/>
        </div>
    </div>

    <div class="config-item">
        <div class="item-key">
            <label>邮箱服务器</label><span>*</span>
        </div>
        <div class="item-input">
            <input type="text" id="mail_server" maxlength="30" value="{{mail.server}}"/>
        </div>
    </div>

    <div class="config-item">
        <div class="item-key">
            <label>端口</label><span>*</span>
        </div>
        <div class="item-input">
            <input id="mail_ports" type="text" value="{{mail.port}}">
        </div>
    </div>

    <div class="config-item">
        <div class="item-key">
            <label>TLS/SSL</label><span>*</span>
        </div>
        <div class="item-input">
            <input id="mail_tls" readonly="readonly" class="rounded_dropdown"
                   value='{{mail.protocol|default ("SSL", True)}}'
                   realvalue='{{mail.protocol|default ("SSL", True)}}'/>
        </div>
    </div>
    <div class="error-tip">
        <p></p>
        <span></span></div>
</div>
<div class="footer" ng-controller="MailModalCtrl">
    <button class="btn btn-blue" ng-click="test()">测试一下</button>
    <button class="btn btn-blue" ng-click="save()" style="margin-left: 10px">保存配置</button>
    {% if mail %}
    <button class="btn btn-blue" id="mail_delete" ng-click="mail_delete()" style="margin-left:10px;">删除邮件配置</button>
    {% else %}
    <button class="btn btn-blue" id="mail_delete" ng-click="mail_delete()" style="margin-left:10px;" disabled>删除邮件配置</button>
    {% endif %}

</div>

